.meta-collapse {

    &-outter {
        position: relative;
        color: white;
    }

    &-inner {
        height: 500px;
        overflow: hidden;
        &.off {
            height: 0px;
        }
        /*
                @media (max-width: $screen-xs-max) {
                    height: 300px;
                }*/
    }

    &-inverse {
        position: absolute;
        width: 100%;
        height: 24px;
        top: 0px;
        z-index: -1;
    }

    &-switch {
        position: absolute;
        right: 0;
        bottom: 2px;
        z-index: 2;
        text-decoration: underline;
        cursor: pointer;
        transition: top .3s ease;
        &.on {
            color: #ddd;
            &:hover {
                //transition:bottom .3s ease;
                //bottom: 14px;
            }
            .glyphicon {
                border: 1px solid white;
            }
        }
        &.off {
            color: $gray-3;
            &:hover {
                //transition:bottom .3s ease;
                //bottom: -10px;
            }
            .glyphicon {
                border: 1px solid $gray-3;
            }
        }
        &.closed {
            top: 0;
            bottom: auto;
        }
        .glyphicon {
            position: relative;
            width: 20px;
            height: 20px;
            padding-top: 2px;
            top: 2px;
            margin: 0 1px 0 3px;
            border-radius: 10px;
            text-align: center;
        }
    }
}
